<!-- 工单管理列表
 * @Descripttion: 
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-06-17
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-07-04
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-form autocomplete="off" :model="searchParam">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="工单类型">
              <a-select v-model:value="searchParam.worksheetType" showSearch placeholder="请选择工单类型">
                <a-select-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="申请时段">
              <a-range-picker style="width: 100%" v-model:value="searchParam.createTime" show-time format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="审批时段">
              <a-range-picker v-model:value="searchParam.approveTime" show-time format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-row justify="end">
              <a-button @click="clear()">重置</a-button>
              <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
            </a-row>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="工单编码">
              <a-input v-model:value="searchParam.id" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="工单状态">
              <a-select v-model:value="searchParam.worksheetRecordState" showSearch placeholder="请选择工单状态">
                <a-select-option v-for="item in stateList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">工单管理</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="detail(record)">详情</a>
            </span>
          </template>
          <template v-if="column.dataIndex === 'worksheetType'">
            <span>
              {{
                typeList
                  .filter((v) => v.value === record.worksheetType)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'worksheetRecordState'">
            <span>
              {{
                stateList
                  .filter((v) => v.value == record.worksheetRecordState)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            {{ formatToDateTime(record.createTime) }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestTaskByPage } from '/@/api/business/worksheet'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    worksheetType: null,
    createTime: [],
    approveTime: [],
    id: null,
    worksheetRecordState: 1,
  })

  const typeList = ref([
    {
      value: 1,
      label: '业务开发类',
    },
    {
      value: 2,
      label: '基础OA类',
    },
  ])

  const stateList = ref([
    {
      value: 1,
      label: '审核中',
    },
    {
      value: 2,
      label: '已通过',
    },
    {
      value: 3,
      label: '已驳回',
    },
  ])

  /** 搜索条件 */
  const formatParam = reactive({
    worksheetType: null,
    createStartTime: null,
    createEndTime: null,
    approveStartTime: null,
    approveEndTime: null,
    id: null,
    worksheetRecordState: null,
  })

  const setFormat = (value) => {
    formatParam.createStartTime = value.createTime?.length ? value.createTime[0] : null
    formatParam.createEndTime = value.createTime?.length ? value.createTime[1] : null
    formatParam.approveStartTime = value.approveTime?.length ? value.approveTime[0] : null
    formatParam.approveEndTime = value.approveTime?.length ? value.approveTime[1] : null
    formatParam.id = value.id
    formatParam.worksheetType = value.worksheetType
    formatParam.worksheetRecordState = value.worksheetRecordState
  }

  watch(
    () => searchParam,
    (value) => {
      if (value) setFormat(value)
    },
    { immediate: true, deep: true },
  )

  /** 表格列配置 */
  const columns = [
    { title: '工单编码', dataIndex: 'id' },
    { title: '工单类型', dataIndex: 'worksheetType' },
    { title: '业务范围', dataIndex: 'businessScope' },
    { title: '提交用户', dataIndex: 'createName' },
    { title: '提交时间', dataIndex: 'createTime' },
    { title: '工单状态', dataIndex: 'worksheetRecordState' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<ActiveTaskTypes.IRequest, ActiveTaskTypes.IResponse[]>(formatParam, requestTaskByPage)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.worksheetType = null
    searchParam.createTime = []
    searchParam.approveTime = []
    searchParam.id = null
    searchParam.worksheetRecordState = 1
    setFormat(searchParam)
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 详情
   * @param record 工单
   */
  const detail = (record) => {
    const { id, taskId, worksheetRecordState, createBy } = record
    router.push({
      path: '/org/workOrder/detailOrder',
      query: { worksheetRecordId: id, taskId, worksheetRecordState, createBy },
    })
  }
</script>

<style lang="less" scoped></style>
